<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>症状自查小程序</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-content">
            <a href="index.html" class="logo">
                <i class="fas fa-heartbeat"></i> 症状自查小程序
            </a>
            <ul class="nav-links">
                <li><a href="index.html" class="active"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="#"><i class="fas fa-info-circle"></i> 关于</a></li>
                <li><a href="#"><i class="fas fa-phone"></i> 联系</a></li>
            </ul>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <div class="container">
        <div class="main-content">
            <h1 class="page-title">症状自查小程序</h1>
            <p class="page-subtitle">智能AI诊断，专业医疗建议，让健康触手可及</p>
            
            <!-- 功能特色展示 -->
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 50px 0;">
                <div style="text-align: center; padding: 30px; background: #f8f9fa; border-radius: 12px;">
                    <i class="fas fa-robot" style="font-size: 48px; color: #667eea; margin-bottom: 20px;"></i>
                    <h3 style="color: #333; margin-bottom: 15px;">AI智能诊断</h3>
                    <p style="color: #666;">基于先进AI技术，快速分析症状，提供初步诊断建议</p>
                </div>
                
                <div style="text-align: center; padding: 30px; background: #f8f9fa; border-radius: 12px;">
                    <i class="fas fa-user-md" style="font-size: 48px; color: #28a745; margin-bottom: 20px;"></i>
                    <h3 style="color: #333; margin-bottom: 15px;">专业医疗建议</h3>
                    <p style="color: #666;">结合医学知识库，提供科学的治疗和护理建议</p>
                </div>
                
                <div style="text-align: center; padding: 30px; background: #f8f9fa; border-radius: 12px;">
                    <i class="fas fa-chart-line" style="font-size: 48px; color: #ffc107; margin-bottom: 20px;"></i>
                    <h3 style="color: #333; margin-bottom: 15px;">数据可视化</h3>
                    <p style="color: #666;">医护端支持数据导入和分析，便于医疗管理</p>
                </div>
            </div>
            
            <!-- 页面导航 -->
            <div class="page-navigation">
                <a href="patient.html" class="page-link">
                    <i class="fas fa-user"></i>
                    患者端 - 开始自我诊断
                </a>
                <a href="doctor.html" class="page-link secondary">
                    <i class="fas fa-user-md"></i>
                    医护端 - 数据管理
                </a>
            </div>
            
            <!-- 使用说明 -->
            <div style="margin-top: 60px; padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white;">
                <h2 style="text-align: center; margin-bottom: 30px;">如何使用</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                    <div style="text-align: center;">
                        <div style="background: rgba(255,255,255,0.2); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                            <span style="font-size: 24px; font-weight: bold;">1</span>
                        </div>
                        <h4>选择身份</h4>
                        <p>根据您的身份选择患者端或医护端</p>
                    </div>
                    <div style="text-align: center;">
                        <div style="background: rgba(255,255,255,0.2); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                            <span style="font-size: 24px; font-weight: bold;">2</span>
                        </div>
                        <h4>描述症状</h4>
                        <p>详细描述您的症状和不适感受</p>
                    </div>
                    <div style="text-align: center;">
                        <div style="background: rgba(255,255,255,0.2); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                            <span style="font-size: 24px; font-weight: bold;">3</span>
                        </div>
                        <h4>获取诊断</h4>
                        <p>AI将为您提供初步诊断和建议</p>
                    </div>
                    <div style="text-align: center;">
                        <div style="background: rgba(255,255,255,0.2); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                            <span style="font-size: 24px; font-weight: bold;">4</span>
                        </div>
                        <h4>专业建议</h4>
                        <p>根据诊断结果采取相应措施</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer style="text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.8); margin-top: 60px;">
        <p>© 2024 症状自查小程序. 本工具仅供参考，不能替代专业医疗诊断。</p>
        <p style="margin-top: 10px; font-size: 12px;">如有紧急情况，请立即拨打急救电话或前往医院就诊</p>
    </footer>

    <script src="app.js"></script>
</body>
</html>